<template>
  <el-card style="height: 86vh">
    <el-row>
      <el-col :span="2.5">
        <el-row>
          <el-date-picker
              v-model="searchTimeSelect"
              type="date"
              placeholder="选择生效时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 140px"
          />
          <el-button type="primary"
                     style="margin-left: 10px"
                     @click="handleSearchTimeClick">查 询</el-button>
                     <el-button type="primary"
                     style="margin-left: 10px"
                     @click="notSignedCount">导入定制客服工单表</el-button>
         <el-button type="primary"
                     style="margin-left: 10px"
                     @click="timeoutCount">导入故障工单超15分钟工单</el-button> 
                        
        </el-row>
      </el-col>
     
       
     
    </el-row>
    <el-table :data="tableData"
              border
              v-loading="dataLoading"
              style="width: 100%;margin-bottom: 5px;margin-top: 16px;height: 70vh">
      <el-table-column label="序号" align="center" type="index" width="100" />
      <el-table-column prop="city" align="center" label="供电单位">
      </el-table-column>
      <el-table-column prop="notSignedCount" align="center" label="地市环节超时工单" min-width="120px">
      </el-table-column>
      <el-table-column prop="timeoutCount" align="center" label="故障工单超15分钟工单" min-width="180px">
      </el-table-column>
      
    </el-table>
    <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="size"
        layout="total"
        :total="total"
    />
  </el-card>
  <el-dialog v-model="UploadExcelDialogShow" title="上传数据" width="20%">
    <el-upload
        class="upload-demo"
        method="post"
        multiple=""
        :action="uploadAction"
        :headers="headers"
        style="margin-left: 10px"
        accept=".xlsx,.xls"
        :show-file-list="false"
        :on-progress="handleProgress"
        :on-success="handleSuccess"
        :before-upload="beforeUploadHandle"
        name="files"
    >
      <el-button type="primary" style="margin-left:100px">导入</el-button>
    </el-upload>
  </el-dialog>
  <!-- <el-dialog v-model="selectTimeDialogShow" title="导出数据" width="300px">
    <el-row>
      <el-date-picker
          v-model="timeModelValue"
          type="date"
          @change="handleTimePickChange"
          placeholder="选择生效时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 140px;"
      />
    </el-row>
    <el-row type="flex" justify="center" style="margin-top: 20px">
      <el-button @click="exportData" type="primary">导出</el-button>
    </el-row>
  </el-dialog> -->
</template>
<script setup>
import { onMounted, ref ,computed} from 'vue'
import utils from '@/utils/utils'
import store from '@/store'
import {createDailyData, getdailyreport} from '@/api/work-order'
import { getYMD } from '@/utils/timeUtil.js'
//import/customer/process
// 导入定制客服工单表
// import/order/notsigned
// 15分钟签收超时督办excel
let headers = {}
const upLoadLoading = ref(false)
const UploadExcelDialogShow = ref(false)
const total = ref(0)
const page = ref(1)
const size = ref(10)
const tableData = ref([])
const dataLoading = ref(false)
const selectTimeDialogShow = ref(false)
const timeModelValue = ref('')
const searchTimeSelect=ref('')
const apiBaseUrl=import.meta.env.VITE_API_URL
const uploadAction=ref('')
const uploadAction1 = computed(() => `${apiBaseUrl}/import/customer/process`);
const uploadAction2 = computed(() => `${apiBaseUrl}/import/order/notsigned`);
const truncateString = (str, maxLength = 10) => {
  if (str.length > maxLength) {
    return str.substring(0, maxLength) + '...';
  }
  return str;
}

const handleSearchTimeClick = async () => {
  if (searchTimeSelect.value === '')return
  dataLoading.value = true
  // console.log(searchTimeSelect.value);
  const result = await getdailyreport({
    time: searchTimeSelect.value
  })
  tableData.value = result
  total.value = result.length-1
  dataLoading.value = false
}
const timeoutCount= ()=>{
  uploadAction.value=uploadAction1.value
  UploadExcelDialogShow.value=true

}
const notSignedCount=()=>{
  uploadAction.value=uploadAction2.value
  UploadExcelDialogShow.value=true
}

// const getList = async () => {
//   dataLoading.value = true
//   const result = await getdailyreport({
//     page: page.value,
//     size: size.value
//   })
//   tableData.value = result.list
//   total.value = result.total
//   dataLoading.value = false
// }

// const lastTime = ref('')
// const getTime = async () => {
//   lastTime.value = await getLastDatTime()
// }
// handleSearchTimeClick()

const handleProgress = (file) => {
  upLoadLoading.value = true
}

const beforeUploadHandle = (file) => {
  utils.showLoadding('正在上传...')
  return true
}

const handleSuccess =  (res) => {
  if (res.content === 0||res.content === null) {
    utils.showSuccess('上传数据成功')
  } else {
    utils.showError('有' + res.content + '数据失败')
  }
  UploadExcelDialogShow.value = false
  utils.hideLoadding()
}

// const onImportExcelClick = () => {
//   UploadExcelDialogShow.value = true
// }

// const handleExportWithTimeClick = () => {
//   selectTimeDialogShow.value = true
// }

// const exportData = async () => {
//   // console.log(isSameDate(lastTime.value, timeModelValue.value))
//   // if (!isSameDate(lastTime.value, timeModelValue.value)) {
//   //   utils.showWarning('导入的数据最后的日期为: ' + lastTime.value)
//   // }
//   await createDailyData()
// }

// const handleTimePickChange = (value) => {

// }

/**
 * size 改变触发
 */
const handleSizeChange = currentSize => {
  size.value = currentSize
  handleSearchTimeClick()
}
/**
 * 页码改变触发
 */
const handleCurrentChange = currentPage => {
  page.value = currentPage
  handleSearchTimeClick()
}

onMounted(() => {
  searchTimeSelect.value=getYMD(new Date())
  handleSearchTimeClick()
  headers = { 'X-Token': store.getters.token }
})
</script>